<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="../css/footer.css">
		<link rel="stylesheet" type="text/css" href="../css/earnmoney.css">
	</head>
	<style type="text/css">
		.issue{
	position: fixed;
	bottom: 0;
	background: #fff;
	z-index: 1;
	padding: 30px 0 20px;
	display: none;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.3);
}
.issue ul{
	margin: 3px 10px 20px 10px;
}
.issue a{
	text-decoration: none;
	color: #000;
}
.issue li{
	margin: 0 10px;
	text-align: center;
}
.issue li img{
	width: 100%;
}
.issue p{
	font-size: 12px;
}
	.clearfix:after{
			content: '';
			display: block;
			clear: both;
		}
	.fenxiang{
		position:fixed;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		top: 0;
		display: none;
	}
		.fenxiang ul{
			position: absolute;
			bottom: 0;
			background: #fff;
			width: 100%;
			height: 50%;
			border-radius: 10px 10px 0 0;
			text-align: center;
		}
		.fenxiang ul li{
			padding: 3% 0;
			position: relative;
		}
		.fenxiang ul li:nth-child(1) i{
			position: absolute;
			right: 5%;
			top:25%;
			font-style: normal;
			color: #9e9e9e;
		}
		.fenxiang ul li:nth-child(2) a{
			float: left;
			display: block;
			width: 25%;
			text-align: center;
			padding-top:10%;
			color: #9e9e9e;
			text-decoration: none;
		}
		.fenxiang ul li:nth-child(2) a:nth-child(1){
			background: url(../img/pengyouquan.png) no-repeat;
			background-position: center top;
			background-size:35% 50%;

		}
		.fenxiang ul li:nth-child(2) a:nth-child(2){
			background: url(../img/weixin.png) no-repeat;
			background-position: center top;
			background-size:35% 50%;

		}
		.fenxiang ul li:nth-child(2) a:nth-child(3){
			background: url(../img/qqhaoyou.png) no-repeat;
			background-position: center top;
			background-size:35% 50%;

		}
		.fenxiang ul li:nth-child(2) a:nth-child(4){
			background: url(../img/qqkongjian.png) no-repeat;
			background-position: center top;
			background-size:35% 50%;

		}
	</style>
	<body>
		<div class="bg"><!--背景尺寸大小-->
			<div class="yellow"></div>
			<div class="text"><!--分享文本内容-->
			<p class="zqtexta">赚钱规则：</p>
			<div class="content">
				<p class="zqtextb">将”美游APP“分享至朋友圈、微信好友、QQ好友</p>
				<p class="zqtextc">别人通过你得分享注册美游成功即可获得1美金</p>
					</div>
			<button class="btn">立刻分享</button>
			</div>
			
		</div>
		<footer>
			<ul class="flex center clearfix">
				<li>
					<a href="../index.html" class="underlining">首页</a>
				</li>
				<li>
					<a href="../html/message.html" class="underlining">消息</a>
				</li>
				<li>
					<a href="javascript:;" class="fabu"></a>
				</li>
				<li>
					<a href="#"  class="active underlining">赚钱</a>
				</li>
				<li>
					<a href="../html/my.html"  class="underlining">我的</a>
				</li>
			</ul>
		</footer>
		<div class="issue">
	<ul class="flex">
		<li>
			<a href="../html/i-party.html">
				<img src="../img/party.png">
				<p>聚会约会</p>
			</a>
		</li>
		<li>
			<a href="../html/i-travel.html">
				<img src="../img/travel.png">
				<p>结伴旅游</p>
			</a>
		</li>
		<li>
			<a href="../html/i-club.html">
				<img src="../img/club.png">
				<p>推拿会所</p>
			</a>
		</li>
		<li>
			<a href="../html/i-guide.html">
				<img src="../img/guide.png">
				<p>景点商家</p>
			</a>
		</li>
	</ul>
	<div class="center issue-x"><img src="../img/6d.png" style="width: 20px;height: 20px;"></div>
	
</div>
<div class="fenxiang">
			<ul>
				<li>分享到 <i class="close">x</i></li>
				<li class="clearfix">
					<a href="">朋友圈</a>
					<a href="">微信好友</a>
					<a href="">QQ好友</a>
					<a href="">QQ空间</a>
				</li>
			</ul>
		</div>
	</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script>
	// 发布
	$('.fabu').click(function(){
		$('.issue').show()
	})
	$('.issue-x').click(function(){
		$('.issue').hide()
	});
	$('.btn').click(function () {
		$('.fenxiang').show();
	});
	$('.close').click(function () {
		$('.fenxiang').hide();
	});
	
</script>